<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网格交易计算器</title>
    <style>
      body {
        font-family: 'Arial', sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background: linear-gradient(to right, #e0eafc, #cfdef3); /* 渐变背景 */
      }

      .container {
        background: rgba(255, 255, 255, 0.9);
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      }

      .title {
        text-align: center;
        color: #333;
        margin-bottom: 30px;
        font-size: 28px;
        font-weight: bold;
      }

      .input-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
      }

      .input-field {
        display: flex;
        flex-direction: column;
      }

      label {
        margin-bottom: 8px;
        color: #555;
        font-weight: 600;
      }

      input {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
        transition: border-color 0.3s;
      }

      input:focus {
        outline: none;
        border-color: #4caf50; /* 聚焦时的边框颜色 */
      }

      .result-section {
        margin-top: 30px;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 8px;
      }

      .earnings {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 20px 0;
      }

      .earnings h1 {
        font-size: 24px;
        color: #ff5722; /* 收益率颜色 */
        margin: 10px 0;
      }

      .lists {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
      }

      .list-container {
        background: rgba(255, 255, 255, 0.95);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
      }

      .list-container:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      }

      .list-container h1 {
        color: #333;
        font-size: 20px;
        margin-bottom: 15px;
        text-align: center; /* 中心对齐标题 */
        font-weight: bold; /* 加粗标题 */
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 400px;
        overflow-y: auto;
      }

      li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        color: #666;
        transition: background 0.3s; /* 添加过渡效果 */
      }

      li:hover {
        background: #f0f0f0; /* 悬停时的背景颜色 */
      }

      button {
        display: block;
        width: 200px;
        margin: 30px auto;
        padding: 12px 24px;
        background: linear-gradient(45deg, #ff6b81 30%, #4a90e2 90%); /* 按钮渐变颜色 */
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      button:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(74, 144, 228, 0.3);
        background: linear-gradient(45deg, #4a90e2 30%, #ff6b81 90%);
      }

      button:active {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(74, 144, 228, 0.2);
      }

      hr {
        border: none;
        border-top: 1px solid #ddd;
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="title">网格交易计算器</h1>

      <div class="input-group">
        <div class="input-field">
          <label for="ipt1">初始价格</label>
          <input type="text" id="ipt1" placeholder="请输入初始价格" class="ipt1" />
        </div>

        <div class="input-field">
          <label for="ipt2">交易差</label>
          <input type="text" id="ipt2" placeholder="请输入交易差" class="ipt2" value="0.002" />
        </div>

        <div class="input-field">
          <label for="ipt3">交易数量</label>
          <input type="text" id="ipt3" placeholder="请输入交易数量" class="ipt3" value="200" />
        </div>

        <div class="input-field">
          <label for="ipt4">拥有的数量</label>
          <input type="text" id="ipt4" placeholder="请输入拥有的数量" class="ipt4" value="2000" />
        </div>
      </div>

      <div class="input-field">
        <label for="ipt5">最终价格</label>
        <input type="text" id="ipt5" placeholder="请输入最终价格" class="ipt5" />
      </div>

      <div class="earnings">
        <div>
          <p>原本收益率：</p>
          <h1 class="earn1"></h1>
        </div>
      </div>

      <div class="lists">
        <div class="list-container">
          <h1>上升</h1>
          <ul id="upList">
            <li>第i次交易价格</li>
          </ul>
        </div>

        <div class="list-container">
          <h1>下降</h1>
          <ul id="downList">
            <li>第i次交易价格</li>
          </ul>
        </div>
      </div>

      <button onclick="start()">开始计算</button>
    </div>

    <script>
      const ipt1 = document.querySelector('.ipt1')
      const ipt2 = document.querySelector('.ipt2')
      const ipt3 = document.querySelector('.ipt3')
      const ipt4 = document.querySelector('.ipt4')
      const upList = document.getElementById('upList')
      const downList = document.getElementById('downList')
      const end = document.querySelector('.ipt5')
      const earn1 = document.querySelector('.earn1')

      function start() {
        const initialPrice = parseFloat(ipt1.value)
        const priceDifference = parseFloat(ipt2.value)
        const tradeCount = parseInt(ipt3.value)
        const ownedCount = parseInt(ipt4.value)
        const finalPrice = parseFloat(end.value)

        if (
          isNaN(initialPrice) ||
          isNaN(priceDifference) ||
          isNaN(tradeCount) ||
          isNaN(ownedCount) ||
          isNaN(finalPrice)
        ) {
          alert('请输入有效的数字')
          return
        }

        upList.innerHTML = ''
        downList.innerHTML = ''

        const gridCount = Math.floor(ownedCount / tradeCount)

        for (let i = 1; i <= gridCount; i++) {
          const upPrice = initialPrice + priceDifference * i
          const downPrice = initialPrice - priceDifference * i
          const upLi = document.createElement('li')
          const downLi = document.createElement('li')
          upLi.textContent = `第${i}次交易价格：${upPrice.toFixed(3)}`
          downLi.textContent = `第${i}次交易价格：${downPrice.toFixed(3)}`
          upList.appendChild(upLi)
          downList.appendChild(downLi)
        }

        // 计算原本持仓收益率
        const holdingReturn = ((finalPrice - initialPrice) / initialPrice) * 100
        earn1.textContent = `${holdingReturn.toFixed(2)}%`
      }
    </script>
  </body>
</html>
